var vm = new Vue({
    el: '#idvue',
    data: {
        title: '武汉仓',
        time: '2017-01-15',
        car: {
            cp: '鄂A0313',
            ck: '良好',
            xha: '冰熊 BXL5041XLC2',
            xhb: '厢体 4056×1756×1726',
            sj: '王师明',
            qy: '09:30',
            yxs: '1小时',
            dq: '10:35',
            wd: '2.1℃',
            wdnum: '60%',
            dd: '3单',
            pgs: '5个',
            kh: '3家',
            js: '28件',
            cwwd: '30℃'
        },
        map: {
            startadd: '北京天安门',
            endadd: '北京黄村',
            carpt: '116.37811,39.851817',
            starttitle: '冷库一'
        },
        chart: {
            datatime: ['9:30', '9:35', '9:40', '9:45', '9:50', '9:55', '10:00', '10:05', '10:10', '10:15', '10:20', '10:25', '10:30'],
            data: [2, 2.5, 3, 2.5, 3, 2.5, 3, 2.5, 3, 3.5, 2, 3, 2.5]
        }
    },
    methods: {
        getData: function() {
            //$ ajax 获取
            //ajax 获取数据成功后调用：
            this.setchart();
            this.maplines();
            $(this.$el).addClass('show')
        },
        setchart: function() { //生成图表
            var myChart = echarts.init(document.getElementById('main'));
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.chart.datatime
                },
                yAxis: {
                    type: 'value',
                    splitNumber: 5,
                    max: 10
                },
                series: [{
                    name: '温度曲线',
                    type: 'line',
                    stack: '总量',
                    data: this.chart.data
                }]
            };
            myChart.setOption(option);
        },
        maplines: function() {
            app.maplines('allmap', [this.map.startadd, this.map.endadd], this.map.carpt, this.map.starttitle,
                '司机    ' + this.car.sj + '<br/>车牌 ' + this.car.cp + '<br/>订单 ' + this.car.dd + '<br/>品规数 ' + this.car.pgs + '<br/>' +
                '客户 ' + this.car.kh + '<br/>件数 ' + this.car.js + '<br/>监控温度 ' + this.car.wd +
                '<br/>监控温度 ' + this.car.wdnum + '<br/>车外温度 ' + this.car.cwwd)
        }
    },
    ready: function() {
        this.getData();
        //app.maplines('allmap', [出发地, 目的地,'车辆经纬度','出发地名','车辆信息')
    }
})